<template>
  <div class="index">
    <div class="index-top">
      <div class="index-top-title">
        总览
        <div class="select-box">
          <span style="font-size: 16px;font-weight: 400;">显示：</span>
          <el-select style="display: inline-block;width: 150px;"  v-model="showType" placeholder="请选择">
            <el-option
              label="本周"
              :value="1">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="index-top-con">
        <div class="index-top-item">
          <div class="item-icon">
            <i style="font-size: 50px;color: #19e219;" class="el-icon-success"></i>
          </div>
          <div class="item-data">
            <div class="item-key">今日已收货</div>
            <div class="item-value">864</div>
          </div>
        </div>
        <div class="index-top-item">
          <div class="item-icon">
            <i style="font-size: 50px;color: #1890ff;" class="el-icon-finished"></i>
          </div>
          <div class="item-data">
            <div class="item-key">本周已完成收货</div>
            <div class="item-value">5660</div>
          </div>
        </div>
        <div class="index-top-item">
          <div class="item-icon">
            <i style="font-size: 50px;color: #19e2db;" class="el-icon-s-marketing"></i>
          </div>
          <div class="item-data">
            <div class="item-key">收货识别率</div>
            <div class="item-value">99%</div>
          </div>
        </div>
        <div class="index-top-item">
          <div class="item-icon">
            <i style="font-size: 50px;color: #2464fb;" class="el-icon-price-tag"></i>
          </div>
          <div class="item-data">
            <div class="item-key" style="margin-bottom: 10px;">1号扫码门</div>
            <div class="item-value" style="font-size: 20px;">识别中</div>
          </div>
        </div>
        <div class="index-top-item">
          <div class="item-icon">
            <i style="font-size: 50px;color: #2464fb;" class="el-icon-price-tag"></i>
          </div>
          <div class="item-data">
            <div class="item-key" style="margin-bottom: 10px;">2号扫码门</div>
            <div class="item-value" style="font-size: 20px;">识别中</div>
          </div>
        </div>
        <div class="index-top-item">
          <div class="item-icon">
            <i style="font-size: 50px;color: #2464fb;" class="el-icon-price-tag"></i>
          </div>
          <div class="item-data">
            <div class="item-key" style="margin-bottom: 10px;">3号扫码门</div>
            <div class="item-value" style="font-size: 20px;color: red;">空闲</div>
          </div>
        </div>
      </div>
    </div>
    <div class="index-bottom">
      <div class="index-left">
        <div class="title-box">
          <div class="title-text">趋势统计分析</div>
          <el-radio-group class="title-opt" v-model="barChartRadio">
            <el-radio-button :label="1" >本日</el-radio-button>
            <el-radio-button :label="2">本周</el-radio-button>
            <el-radio-button :label="3">本月</el-radio-button>
            <el-radio-button :label="4">本年</el-radio-button>
          </el-radio-group>
        </div>
        <div class="content-box">
          <bar-chart :chart-data="barChart" height="100%"></bar-chart>
        </div>
      </div>
      <div class="index-right">
        <div class="title-box">
          <div class="title-text">收货实时记录</div>
        </div>
        <div class="content-box" >
          <el-table
          :data="tableData"
          height="100%"
          style="width: 100%">
          <el-table-column
            align="center"
            prop="date"
            label="传票号">
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="收货时间">
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="供应商">
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="扫码门">
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="订购数量">
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="收货数量">
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="状态">
          </el-table-column>
        </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import barChart from './barChart'
export default{
  components: {
    barChart
  },
  data(){
    return{
      showType:1,
      barChartRadio:null,
      tableData:[],
      barChart:{
        xData:[],
        yData1:[],
        yData2:[]
      }
    }
  },
  created(){
    this.barChartRadio = 1;
  },
  watch:{
    barChartRadio(v){
      console.log(v)
      if(v==1){
        let xData = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];
        let yData1 = [];
        let yData2 = [];
        for(let i = 0;i<24;i++){
          let item = Math.floor(Math.random() * 20) + 1;
          let item2 = Math.floor(Math.random() * 3) + 1;
          yData1.push(item);
          yData2.push(item2);
        }
        this.barChart = {
          xData,yData1,yData2
        }
      }else if(v==2){
        let xData = ['6-4','6-5','6-6','6-7','6-8','6-9','6-10'];
        let yData1 = [];
        let yData2 = [];
        for(let i = 0;i<7;i++){
          let item = Math.floor(Math.random() * 20) + 1;
          let item2 = Math.floor(Math.random() * 3) + 1;
          yData1.push(item);
          yData2.push(item2);
        }
        this.barChart = {
          xData,yData1,yData2
        }
      }else if(v==3){
        let xData = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
        let yData1 = [];
        let yData2 = [];
        for(let i = 0;i<30;i++){
          let item = Math.floor(Math.random() * 20) + 1;
          let item2 = Math.floor(Math.random() * 3) + 1;
          yData1.push(item);
          yData2.push(item2);
        }
        this.barChart = {
          xData,yData1,yData2
        }
      }else if(v==4){
        let xData = [1,2,3,4,5,6,7,8,9,10,11,12];
        let yData1 = [];
        let yData2 = [];
        for(let i = 0;i<12;i++){
          let item = Math.floor(Math.random() * 20) + 1;
          let item2 = Math.floor(Math.random() * 3) + 1;
          yData1.push(item);
          yData2.push(item2);
        }
        this.barChart = {
          xData,yData1,yData2
        }
      }
    }
  }
}

</script>

<style lang="scss" scoped>
.index-top{
  width: 100%;
  .index-top-title{
    width: 100%;
    font-size: 20px;
    color: #222;
    padding: 10px 30px;
    font-weight: bold;
    position: relative;
    .select-box{
      position: absolute;
      width: 200px;
      right: 10px;
      top: 10px;
    }
  }
  .index-top-con{
    width: 100%;
    white-space: nowrap;
    .index-top-item{
      width: 230px;
      background-color: #fff; 
      display: inline-flex;
      vertical-align: middle;
      height: 140px;
      box-shadow: 0 0 15px #ccc;
      margin: 20px 20px;
      border-radius: 5px;
      .item-icon{
        flex: 0 0 80px;
        display:flex;
        align-items: center;
        justify-content: center;
      }
      .item-data{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .item-key{
          margin-bottom: 15px;
          font-size: 18px;
        }
        .item-value{
          font-weight: bold;
          font-size: 32px;
          color: #222;
        }
        .item-sub{
          font-weight: bold;
          font-size: 16px;
          color: #222;
        }
      }
    }
  }
}
.index-bottom{
  width: 100%;
  height: calc(100vh - 320px);
  display: flex;
  padding: 20px 30px;
  .title-box{
    width: 100%;
    height: 60px;
    .title-text{
      line-height: 60px;
      font-size: 20px;
      color: #222;
      font-weight: bold;
      float: left;
    }
    .title-opt{
      float: left;
      margin-top: 12px;
      margin-left: 30px;
    }
  }
  .content-box{
    width: 100%;
    height: calc(100% - 60px);
  }
  .index-left{
    flex: 1;
    height: 100%;
    margin-right: 20px;
  }
  .index-right{
    flex: 0 0 700px;
    height: 100%;
  }
}
</style>